<template>
  <view class="container">
    <view class="amount" :class="{ received: isReceived }">
      <span class="platform-coupon-flag" v-if="data._isPlatformCoupon">神券</span>
      <span class="value"
        ><span class="symbol" v-if="!data._isDiscountValue">￥</span
        >{{ data.parValue + (!data._isDiscountValue && data.expansionAmount ? data.expansionAmount : 0)
        }}{{ data._isDiscountValue ? '折' : ''
        }}{{ !data._isPlatformCoupon && data._isDiscountValue ? '商品券' : '' }}</span
      >
    </view>
    <view class="operation" :class="{ received: isReceived }">
      <span>{{ isReceived ? (data._isPlatformCoupon ? '可用' : '已领') : '领' }}</span>
    </view>
  </view>
</template>

<script setup lang="ts">
import { CouponCoreInfo } from '@/types/response/coupon'
import { computed } from 'vue'

const props = defineProps({
  data: {
    default: {} as CouponCoreInfo,
    required: true
  }
})
// 是否已领取
const isReceived = computed(() => props.data.id != null)
</script>

<style scoped lang="scss">
.container {
  $bg-color: #fe614d;
  $radius-size: 2px;
  $radius-center-size: $radius-size * 1.3;

  display: flex;
  margin-right: 6px;
  padding: 2px 0;
  height: 100%;
  color: #fff;
  flex-wrap: nowrap;

  $font-size: 17.5px;

  .received {
    color: #ff6645 !important;
    background-color: #ffeaf4 !important;
  }

  .amount {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 15rpx;
    font-weight: bold;
    border-right: 0.6px dashed #fff;
    border-radius: $radius-size;
    background-color: $bg-color;
    border-bottom-right-radius: $radius-center-size !important;
    border-top-right-radius: $radius-center-size !important;

    .platform-coupon-flag {
      line-height: 100%;
      font-size: $font-size * 0.9;
    }

    .value {
      $amount-font-size: $font-size * 0.8;

      font-size: $amount-font-size;

      .symbol {
        font-size: $amount-font-size * 0.5;
      }
    }
  }

  .operation {
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: $font-size * 0.65;
    border-radius: $radius-size;
    background-color: $bg-color;
    border-bottom-left-radius: $radius-center-size !important;
    border-top-left-radius: $radius-center-size !important;
  }
}
</style>
